Namespace("sketch.ui");

(function(ui) {
    var fwk = sketch.framework;

    ui.iphone.TextBox = klass(ui.common.StackPanel, (function() {
        var onLeftImageChanged = function(event) {
            if (event.newValue == null) {
                this._leftImage.width(0);
                this.arrange();
            }
        };

        var onRightImageChanged = function(event) {
            if (event.newValue == null) {
                this._rightImage.width(0);
                this.arrange();
            }
        };

        var onWidthChanged = function(event) {
            this._label.width(this.width() - this._leftImage.width() - this._rightImage.width() - 14);
            this.arrange();
        };

        return {
            __type__:"ui.iphone.TextBox",
            _constructor:function() {
                // private variables
                this._stroke = "#5C6D8B";
                this._fillResource = fwk.Resources['textbox'];

                // properties initialization
                this.properties.createProperty("type", "TextBox border type", "normal")
                    .possibleValues({'normal':'Normal', 'round':'Round', 'none':'None', 'flat':'Flat', '3d':'3d'})
                    .useInModel()
                    .editorTemplate("#editor-dropdown");
                var labelProperty = this.properties.createProperty("text", "Text", "Text").useInModel().editorTemplate("#editor-textbox");
                var textAlign = this.properties.createProperty("textAlign", "Text align", "left")
                    .possibleValues({'left':'Left', 'center':'Center', 'right':'Right'})
                    .useInModel()
                    .editorTemplate("#editor-dropdown");

                var font = this.properties.createProperty("font", "Font", new fwk.Font({
                    bold: true,
                    color:"black"
                })).editable();

                var leftImageProperty = this.properties.createProperty("leftImage", "Left image source", null)
                    .editorTemplate("#editor-imagepicker", 'textbox');
                var rightImageProperty = this.properties.createProperty("rightImage", "Right image source", null)
                    .editorTemplate("#editor-imagepicker", 'textbox');

                this.init({
                    $leftImage:EventHandler(this, onLeftImageChanged),
                    $rightImage:EventHandler(this, onRightImageChanged),
                    width:150,
                    height:29,
                    orientation:'horizontal'
                });

                var label = this._label = new ui.iphone.Label();
                this._label.init({
                    canSelect:false,
                    height:this.height(),
                    width:this.width() - 10,
                    verticalAlign:'middle',
                    margin:new fwk.Box(3, 0, 3, 0),
                    text:this.text(),
                    font:font.value,
                    zOrder:2
                });


                labelProperty.bind(label.properties.text.bindingPoint);
                textAlign.bind(label.properties.textAlign.bindingPoint);
                font.bind(label.properties.font.bindingPoint);

                this.add(label);

                this._leftImage = new fwk.ImageElement();
                this._leftImage.init({
                    canSelect:false,
                    zOrder:1,
                    verticalAlignment:'center',
                    margin:new fwk.Box(4, 0, 0, 0),
                    $width:EventHandler(this, onWidthChanged)
                });
                leftImageProperty.bind(this._leftImage.properties.src.bindingPoint);

                this._rightImage = new fwk.ImageElement();
                this._rightImage.init({
                    canSelect:false,
                    zOrder:3,
                    verticalAlignment:'center',
                    margin:new fwk.Box(0, 0, 4, 0),
                    $width:EventHandler(this, onWidthChanged)
                });
                rightImageProperty.bind(this._rightImage.properties.src.bindingPoint);

                this.add(this._leftImage);
                this.add(this._rightImage);

                this.onresize.bind(EventHandler(this, onWidthChanged));
            },
            text
                :
                function(value) {
                    return this.properties.text(value);
                }

            ,
            drawSelf:function(context) {
                var x = this.left() + 0.5,
                    y = this.top() + 0.5,
                    w = this.width(),
                    h = this.height();
                var fillBrush = this._fillResource.toBrush(context, 0, y, 0, y + h);
                context.save();
                context.fillStyle = fillBrush;
                context.strokeStyle = this._stroke;
                context.lineWidth = 1;
                var type = this.type();
                if (type == 'normal') {
                    context.roundedRectPath(x, y, w, h, 4, 4);
                    context.fill();
                    context.stroke();
                } else if (type == 'round') {
                    context.roundedRectPath(x, y, w, h, h / 2 + 3, h / 2, fillBrush, this._stroke);
                    context.fill();
                    context.stroke();
                }
                else if (type == 'none') {
                    // should be empty
                } else if (type == '3d') {
                    context.strokeStyle = '#808080';
                    context.rectPath(x, y, w, h);
                    context.stroke();
                    context.strokeStyle = '#B3B3B3';
                    context.moveTo(x + 1, y + h - 1);
                    context.lineTo(x + 1, y + 1);
                    context.lineTo(x + w - 1, y + 1);
                    context.stroke();
                }
                else if (type == 'flat') {
                    context.strokeStyle = 'black';
                    context.rectPath(x, y, w, h);
                    context.stroke();
                }

                context.restore();

                this.SuperKlass.drawSelf.call(this, context);
//                this.labelBuffer.draw(context);
            }
            ,
            type:function(value) {
                return this.properties.type(value);
            }
            ,
            dblclick : function(event) {
                this.showInplaceEditor(this.properties.label);
            }
            ,
            resizeDimensions:function() {
                return fwk.ResizeDimension.Horizontal;
            }
        };
    })
        ()
    )
        ;
})
    (sketch.ui);